 /*
 * 整体妆容的分类管理编辑修改
 * @Author: zfx
 * @Date: 2018-06-26 17:52:07
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>
    .ivu-form-item-content {
        img {
            width: 150px;
        }
    }
</style>
<template>
	<div class="v-customer-classify-edit">
		<Form
			ref="formValidate"
			:model="formValidate"
			:rules="ruleValidate"
			:label-width="labelWidth(120, 120)"
			name="eidt__form">

			<Form-item
				:label="$t('classification.name')"
				prop="name">
				<i-input
					v-model="formValidate.name"
					:placeholder="$t('classification.please_enter_name')"
					name="edit__name"
					type="text"/>
			</Form-item>

			<!-- <Form-item
				:label="$t('classification.thumb')"
				prop="thumb_img">
				<Uploader
					ref="thumb"
					:default.sync="thumb_src"
					@on-remove="(file)=>{handleRemove('thumb_img',file)}"
					@on-change="(file)=>{handleChange('thumb_img',file)}">
					{{ $t('classification.pic_tip') }}
				</Uploader>
			</Form-item> -->

			<Form-item
				:label="$t('classification.priority')"
				prop="priority">
				<InputNumber
					:min="0"
					:max="100000"
					v-model="formValidate.priority"
					name="create__priority"/>
			</Form-item>

			<Form-item>
				<Button
					name="create__edit"
					type="primary"
					@click="handleSubmit('formValidate')">
					{{ $t('common.update') }}
				</Button>
			</Form-item>

		</Form>
	</div>
</template>

<script>

import labelWidthMixin from 'src/views/mixins/labelWidthMixin';
import { validateUpdateImage } from 'src/validate'; // 引入校验文件
import Uploader from 'src/views/component/Uploader';

export default {

	name: 'ClassificationEdit',
	components: {
		Uploader,
	},
	mixins: [labelWidthMixin],
	props: {
		classifyDetail: {
			type: Object,
			default() {
				return {};
			},
		},
		loading: {
			type: Boolean,
			default() {
				return false;
			},
		},
	},

	data() {
		return {
			formValidate: {
				name: '', // 分类名称

				priority: 0, // 优先级

				// thumb_img: '', // 缩略图
			}, // 更新产分类时的表单

			ruleValidate: { // 表单验证规则
				name: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('classification.name') }),
						trigger: 'blur,change',
					},
				],
				thumb_img: [
					{
						required: true,
						validator: validateUpdateImage,
						trigger: 'blur,change',
					},
				],
				priority: [
					{
						required: true,
						type: 'number',
						message: this.$t('validate.required', { field: this.$t('classification.priority') }),
						trigger: 'blur,change',
					},
				],
			},

			thumb_src: '', // 上传的图片信息
		};
	},

	created() {
		this.initFormData();
	},

	methods: {
		initFormData() {
			if (this.classifyDetail) {
				this.formValidate.name = this.classifyDetail.name;
				this.formValidate.priority = parseInt(this.classifyDetail.priority, 10);
				// 上传图片
				// this.thumb_src = this.classifyDetail.image;
				// this.formValidate.thumb_img = this.classifyDetail.image;
			}
		},

		/**
		 * 选择图片
		 * @param {Object} file {选择的文件对象集合}
		 * @param {String} field {icon}
		 * @return {undefined}
		 */
		handleChange(field, { file }) {
			this.formValidate.thumb_img = file;
		},

		/**
		 * 删除图片
		 * @return {undefined}
		 */
		handleRemove() {
			this.formValidate.thumb_img = '';
		},

		/**
         * 重置表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
		handleReset(name) {
			this.$refs[name].resetFields();
			// this.$refs.thumb.reset();
		},

		/**
         * 更新分类信息
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
		handleSubmit(name) {
			if (this.loading) return;
			this.$refs[name].validate((valid) => {
				if (valid) {
					this.$emit('update', this.classifyDetail.id, this.formDataCreate());
				} else {
					this.$Message.error(this.$t('common.exist_empty_field'));
				}
			});
		},

		/**
         * 手动拼接表单数据
         * @return {Object} {拼接好的表单数据}
         */
		formDataCreate() {
			const new_object = {
				_method: 'PUT',

				name: this.formValidate.name,
				// image: this.formValidate.thumb_img,
				priority: this.formValidate.priority,
			};

			const form_data = new FormData();

			Object.keys(new_object).forEach((key) => {
				if (typeof new_object[key] !== 'undefined') {
					form_data.append(key, new_object[key]);
				}
			});
			return form_data;
		},

	},
};
</script>
